<template>
    <client-only>
        <div class="product-detail-print-guide">
            <div class="print-detail-warp" v-if="detail.template_design">
                <h3>Print detail</h3>
                <p>Reference garment size：<span v-text="getSizeName(detail.output_size)"></span>&nbsp;(<button
                        @click="scaling_dialog = true">Scaling guide</button>)</p>
                <div class="print-detail">
                    <table>
                        <thead>
                            <tr>
                                <th>Garment part</th>
                                <th>Print area</th>
                                <th>Maximum print size</th>
                                <th>Print position</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-for='(parent, key) in detail.template_design'>
                                <tr v-for="(child, i) in parent" :key="child.id">
                                    <td v-if="i == 0" :rowspan="parent.length" class="primary"> {{ key }}</td>
                                    <td>{{ getPieceObj(child.canvas_name).name }}</td>
                                    <td>{{ child.real_width / 300 }}" x {{ child.real_height / 300 }}"</td>
                                    <td><button :class="{ active: activePrint == child }"
                                            @click="setActivePrint(child)">view</button></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                    <div class="print-detail-info" v-if="activePrint">
                        <h3
                            v-text="getPieceObj(activePrint.canvas_name).group + getPieceObj(activePrint.canvas_name).name">
                        </h3>
                        <figure>
                            <img v-lazy="getPrintAreaImage(activePrint)" alt="">
                        </figure>
                        <h4>{{ getPieceExplain(activePrint.canvas_name) }}</h4>
                        <cite>
                            <h3 v-for="(guide, index) in activePrint.print_guide" :key="index">
                                <strong v-text="guide.print_distance || ''"></strong>
                                <span v-show="guide.print_mistake"
                                    v-text="`(Measurement error limit: ${guide.print_mistake}cm)`"></span>
                            </h3>
                        </cite>
                    </div>
                </div>
            </div>
            <div class="color-shift-warp">
                <div class="color-shift-exhibit" v-if="detail.chroma_bad">
                    <h3>Color shift</h3>
                    <p v-text="detail.chroma_bad"></p>
                    <div class="exhibit" v-if="detail.design_img">
                        <h4>Exhibit 1</h4>
                        <figure>
                            <img :src="$getImageUrl(detail.design_img)" alt="">
                        </figure>
                    </div>
                    <div class="exhibit" v-if="detail.entity_img">
                        <h4>Exhibit 2</h4>
                        <figure>
                            <img :src="$getImageUrl(detail.entity_img)" alt="">
                        </figure>
                    </div>
                </div>
                <div class="color-shift-explain">
                    <h3>
                        <img src="https://img.podpartner.com/static/svgs-20230202/product-detail-print.svg" alt="">
                        Print file guidelines
                    </h3>
                    <h4>1. Please upload JPG or PNG images that are under 50MB.</h4>
                    <p style="margin-bottom:20px">Currently, only JPG and PNG formats are supported. We recommend
                        uploading images
                        of 150 DPI or higher to ensure ideal print quality.</p>
                    <h4>2. Please create print files in sRGB color mode.</h4>
                    <p>To minimize the color shift caused by color mode conversion, please create your print file in
                        sRGB color
                        mode.</p>
                    <h3>
                        <img src="https://img.podpartner.com/static/svgs-20230202/product-detail-warning.svg" alt="">
                        Do's and Don'ts
                    </h3>
                    <h4>1. Make sure the images uploaded to different print areas are not overlapping.</h4>
                    <p>If images uploaded to different print areas are overlapping, the overlapping part cannot be
                        printed out
                        properly. Please make sure there's a margin between the images placed in different print areas.
                    </p>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/product-detail-rule-1.png" alt="">
                        <img src="https://img.podpartner.com/static/images-20230202/product-detail-rule-2.png" alt="">
                    </figure>
                    <h4>2. Do not create an image by piecing together fragments uploaded to adjacent print areas.</h4>
                    <p>Even if a fragmentary image appears seamless in Design Creator or mockup preview, the print
                        result will not
                        turn out as expected.</p>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/product-detail-rule-3.png" alt="">
                    </figure>
                </div>
            </div>
            <ProductScalingDialog v-model="scaling_dialog"></ProductScalingDialog>
            <UxDialog class="web-image-dialog" :title="activePrint.canvas_name || ''" :visible="web_image_dialog"
                @close="close()">
                <figure>
                    <img v-lazy="getPrintAreaImage(activePrint)" alt="">
                </figure>
                <h4>{{ getPieceExplain(activePrint.canvas_name) }}</h4>
                <cite>
                    <h3 v-for="(guide, index) in activePrint.print_guide" :key="index">
                        <strong v-text="guide.print_distance || ''"></strong>
                        <span v-show="guide.print_mistake"
                            v-text="`(Measurement error limit: ${guide.print_mistake}cm)`"></span>
                    </h3>
                </cite>
            </UxDialog>
        </div>
    </client-only>
</template>
<script>
export default {
    name: "DetailPrintDetail",
    props: ['detail'],
    data () {
        return {
            // activePrint: null,
            activeDesign: null,
            scaling_dialog: false,
            web_image_dialog: false,
        }
    },
    computed: {
        activePrint () {
            const detail = this.detail
            if (this.activeDesign) {
                return this.activeDesign
            } else if (detail && typeof detail.template_design == 'object') {
                let key = Object.keys(detail.template_design)[0]
                return detail.template_design[key][0]
            } else {
                return {}
            }
        }
    },
    methods: {
        close () {
            this.web_image_dialog = false
        },
        getActivePrint () {
            let detail = this.detail;
            if (detail && typeof detail.template_design == 'object') {
                let key = Object.keys(detail.template_design)[0]
                // this.activePrint = detail.template_design[key][0]
            }
        },
        setActivePrint (design) {
            this.activeDesign = design;
            let width = document.documentElement.clientWidth;
            width <= 960 && (this.web_image_dialog = true);
        },
        getPieceObj (key) {
            const names = {
                'Front Side - Middle': { group: 'Front Side - ', name: 'Center' },
                'Front Side - Top': { group: 'Front Side - ', name: 'Top' },
                'Front Side - Bottom': { group: 'Front Side - ', name: 'Bottom' },
                'Front Side - Lower Left': { group: 'Front Side - ', name: 'Bottom left' },
                'Front Side - Lower Right': { group: 'Front Side - ', name: 'Bottom right' },
                'Front Side - Shoulder Left': { group: 'Front Side - ', name: 'Left shoulder' },
                'Front Side - Shoulder Right': { group: 'Front Side - ', name: 'Right shoulder' },
                'Front Side - Pocket': { group: 'Front Side - ', name: 'Pocket' },

                'Back Side - Middle': { group: 'Back Side - ', name: 'Center' },
                'Back Side - Top': { group: 'Back Side - ', name: 'Top' },
                'Back Side - Bottom': { group: 'Back Side - ', name: 'Bottom' },
                'Back Side - Lower Left': { group: 'Back Side - ', name: 'Bottom left' },
                'Back Side - Lower Right': { group: 'Back Side - ', name: 'Bottom right' },
                'Back Side - Neck Label Outer': { group: 'Back Side - ', name: 'Outside neck label' },

                'Sleeve': { group: '', name: 'Sleeve' },
                'Long Sleeve': { group: '', name: 'Long sleeve' },
                'Neck Label Inner': { group: '', name: 'Inside neck label' },


                'Front Side - Left Leg Center': { group: 'Front Side - ', name: 'Center left leg' },
                'Front Side - Left Leg Top': { group: 'Front Side - ', name: 'Upper left leg' },
                'Front Side - Left Leg Bottom': { group: 'Front Side - ', name: 'Lower left leg' },
                'Front Side - Right Leg Center': { group: 'Front Side - ', name: 'Center right leg' },
                'Front Side - Right Leg Top': { group: 'Front Side - ', name: 'Upper right leg' },
                'Front Side - Right Leg Bottom': { group: 'Front Side - ', name: 'Lower right leg' },

                'Back Side - Left Leg Center': { group: 'Back Side - ', name: 'Center left leg' },
                'Back Side - Left Leg Top': { group: 'Back Side - ', name: 'Upper left leg' },
                'Back Side - Left Leg Bottom': { group: 'Back Side - ', name: 'Lower left leg' },
                'Back Side - Right Leg Center': { group: 'Back Side - ', name: 'Center right leg' },
                'Back Side - Right Leg Top': { group: 'Back Side - ', name: 'Upper right leg' },
                'Back Side - Right Leg Bottom': { group: 'Back Side - ', name: 'Lower right leg' },
                'Back Side - Left Pocket': { group: 'Back Side - ', name: 'Left pocket' },
                'Back Side - Right Pocket': { group: 'Back Side - ', name: 'Right pocket' },

                'shorts-Front Side - Left Leg Pocket': { group: 'Front Side - ', name: 'Left pocket' },
                'shorts-Front Side - Right Leg Pocket': { group: 'Front Side - ', name: 'Right pocket' },
                'shorts-Front Side - Left Leg Bottom': { group: 'Front Side - ', name: 'Lower left leg' },
                'shorts-Front Side - Right Leg Bottom': { group: 'Front Side - ', name: 'Lower right leg' },
                'shorts-Back Side - Left Pocket': { group: 'Back Side - ', name: 'Left pocket' },
                'shorts-Back Side - Right Pocket': { group: 'Back Side - ', name: 'Right pocket' },
                'shorts-Back Side - Left Leg Bottom': { group: 'Back Side - ', name: 'Lower left leg' },
                'shorts-Back Side - Right Leg Bottom': { group: 'Back Side - ', name: 'Lower right leg' },

            }

            if (this.$getClassifyBySpu(this.detail.spu) == 'shorts') {
                return names['shorts-' + key] || { group: ' - ', name: '' }
            } else {
                return names[key] || { group: ' - ', name: '' }
            }
        },
        getPieceExplain (key) {
            const name = {
                'Front Side - Top': "Horizontally centered, the print area is slightly under the bottom of the front neckline.",
                'Front Side - Middle': "Horizontally centered, the print area is vertically centered between the bottom of the front neckline and the bottom hem's upper seam.",
                'Front Side - Bottom': "Horizontally centered, the print area is slightly above the bottom hem's upper seam.",
                'Front Side - Lower Left': "The print area is close to the left side seam and slightly above the bottom hem's upper seam.",
                'Front Side - Lower Right': "The print area is close to the right side seam and slightly above the bottom hem's upper seam.",
                'Front Side - Shoulder Left': "Centered between the neckline and the left armhole, the print area is parallel to and slightly under the left shoulder seam.",
                'Front Side - Shoulder Right': 'Centered between the neckline and the right armhole, the print area is parallel to and slightly under the right shoulder seam.',
                'Front Side - Pocket': "Horizontally centered, the print area is slightly above the bottom hem's upper seam.",

                'Back Side - Top': "Horizontally centered, the print area is slightly under the bottom of the back neckline.",
                'Back Side - Middle': "Horizontally centered, the print area is vertically centered between the bottom of the back neckline and the bottom hem's upper seam.",
                'Back Side - Bottom': "Horizontally centered, the print area is slightly above the bottom hem's upper seam.",
                'Back Side - Lower Left': "The print area is close to the left side seam and slightly above the bottom hem's upper seam.",
                'Back Side - Lower Right': "The print area is close to the right side seam and slightly above the bottom hem's upper seam.",
                'Back Side - Neck Label Outer': "Horizontally centered, the print area is slightly under the bottom of the back neckline.",

                'Sleeve': "Horizontally centered, the print area is slightly above the sleeve hem seam.",
                'Long Sleeve': "Horizontally centered, the print area is slightly above the sleeve hem seam.",
                'Neck Label Inner': 'Horizontally centered, the print area is slightly under the bottom of the back neckline.',

                'Front Side - Left Leg Top': 'The print area is close to the left outseam, its top edge horizontally aligned with the crotch point.',
                'Front Side - Left Leg Bottom': 'The print area is close to the left outseam and slightly above the bottom hem.',
                'Front Side - Right Leg Top': 'The print area is close to the right outseam, its top edge horizontally aligned with the crotch point.',
                'Front Side - Right Leg Bottom': ' The print area is close to the right outseam and slightly above the bottom hem.',

                'Back Side - Left Leg Top': 'The print area is close to the left outseam, its top edge horizontally aligned with the crotch point.',
                'Back Side - Left Leg Bottom': 'The print area is close to the left outseam and slightly above the bottom hem.',
                'Back Side - Right Leg Top': 'The print area is close to the right outseam, its top edge horizontally aligned with the crotch point.',
                'Back Side - Right Leg Bottom': 'The print area is close to the right outseam and slightly above the bottom hem.',
                'Back Side - Left Pocket': 'The print area is equidistant from the left and right seams of the left pocket and very close to the pocket opening.',
                'Back Side - Right Pocket': 'The print area is equidistant from the left and right seams of the right pocket and very close to the pocket opening.',

                'shorts-Front Side - Left Leg Pocket': 'The print area is equidistant from the left and right seams of the left pocket and very close to the pocket opening.',
                'shorts-Front Side - Right Leg Pocket': 'The print area is equidistant from the left and right seams of the right pocket and very close to the pocket opening.',
                'shorts-Front Side - Left Leg Bottom': "Horizontally centered, the print area is slightly above the bottom hem's upper seam.",
                'shorts-Front Side - Right Leg Bottom': "Horizontally centered, the print area is slightly above the bottom hem's upper seam.",
                'shorts-Back Side - Left Pocket': "The print area is equidistant from the left and right seams of the left pocket and very close to the pocket opening.",
                'shorts-Back Side - Right Pocket': "The print area is equidistant from the left and right seams of the right pocket and very close to the pocket opening.",
                'shorts-Back Side - Left Leg Bottom': "Horizontally centered, the print area is slightly above the bottom hem's upper seam.",
                'shorts-Back Side - Right Leg Bottom': "Horizontally centered, the print area is slightly above the bottom hem's upper seam.",

            }

            if (this.$getClassifyBySpu(this.detail.spu) == 'shorts') {
                return name['shorts-' + key]
            } else {
                return name[key]
            }


        },
        getPrintAreaImage (active) {
            let src = 'https://img.podpartner.com/static/printArea/';
            let canvas_name = active.canvas_name || ""

            if (this.$getClassifyBySpu(this.detail.spu) == 'shorts') {
                canvas_name = 'shorts-' + canvas_name;
            }

            return src + canvas_name.replace(/\s+/g, '') + '.png'
        },
        getSizeName (id) {
            let list = [
                {
                    "size_id": "M01",
                    "name": "XXS",
                    "sort": 1
                },
                {
                    "size_id": "M02",
                    "name": "XS",
                    "sort": 2
                },
                {
                    "size_id": "M03",
                    "name": "S",
                    "sort": 3
                },
                {
                    "size_id": "M04",
                    "name": "M",
                    "sort": 4
                },
                {
                    "size_id": "M05",
                    "name": "L",
                    "sort": 5
                },
                {
                    "size_id": "M06",
                    "name": "XL",
                    "sort": 6
                },
                {
                    "size_id": "M07",
                    "name": "2XL",
                    "sort": 7
                },
                {
                    "size_id": "M08",
                    "name": "3XL",
                    "sort": 8
                },
                {
                    "size_id": "M09",
                    "name": "4XL",
                    "sort": 9
                },
                {
                    "size_id": "M10",
                    "name": "5XL",
                    "sort": 10
                }
            ];
            return (list.find(item => item.size_id == id) || {})['name'] || ''

        }
    },
    created () {
        this.getActivePrint()
    },
}
</script>
<style scoped lang='scss'>
.web-image-dialog::v-deep {
    &>.dialog-content {
        &>h2 {
            display: block;
            border-bottom: none;

            &::before {
                display: none;
            }
        }

        .dialog-body {
            box-sizing: border-box;
            padding: 12px 20px 0;

            &>figure {
                margin-bottom: 22px;
                width: 100%;
                padding-bottom: 100%;
                position: relative;

                img {
                    position: absolute;
                    width: 100%;
                    left: 0;
                    top: 0;
                }
            }

            h4 {
                margin: 0 auto 32px;
                font-size: 12px;
                font-weight: 400;
                color: #000000;
                line-height: 20px;
            }

            cite {
                margin: 0 auto;

                h3 {
                    margin: 0;
                    font-size: 0;
                    line-height: 20px;
                    text-align: left;
                    color: #000000;

                    strong {
                        font-size: 14px;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: 500;
                    }

                    span {
                        font-size: 14px;
                        font-family: Roboto;
                        font-weight: 400;
                    }
                }
            }
        }
    }
}

.product-detail-print-guide {
    font-family: Roboto;
    width: 100%;
    padding: 0 0 76px;

    p {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 16px;

        button {
            width: auto;
            height: auto;
            font-size: 14px;
            font-weight: 400;
            color: #087196;
            line-height: 16px;
            padding: 0;
            border: none;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
                color: #287e9c;
            }
        }
    }

    h3 {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 28px;
        margin-bottom: 8px;
    }

    .print-detail {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin: 8px 0 0;

        table {
            height: 552px;

            td,
            th {
                padding: 0 6px;
            }

            th {
                background-color: #f6f6f6;
                padding: 0 14px;
                font-size: 12px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 14px;
            }

            tbody {
                tr {
                    background: #fff;

                    &:nth-child(2n) {
                        background: #fafafa;
                    }

                    td {
                        height: 16px;
                        font-size: 12px;
                        font-family: Roboto-Regular, Roboto;
                        color: #000000;
                        font-weight: 400;
                        line-height: 16px;

                        &.primary {
                            background-color: #fff;
                            font-family: Roboto-Medium, Roboto;
                            font-weight: 500;
                            color: #000000;
                            font-size: 12px;
                            line-height: 16px;
                        }

                        text-align: center;

                        button {
                            position: relative;
                            padding: 0;
                            border: none;
                            height: auto;
                            font-size: 12px;
                            font-weight: 400;
                            color: #555555;
                            line-height: 16px;
                            text-decoration: underline;

                            &:hover {
                                color: #ea4c89;
                            }

                            &.active {
                                color: #ea4c89;
                                text-decoration: none;

                                &::after {
                                    content: '';
                                    position: absolute;
                                    border: 4px solid transparent;
                                    border-left: 7px solid #ea4c89;
                                    right: -100%;
                                    top: 50%;
                                    transform: translateY(-50%);
                                }
                            }
                        }
                    }
                }
            }
        }

        .print-detail-info {
            box-sizing: border-box;
            width: 400px;
            height: 552px;
            border: 1px #e6e6e6 solid;
            margin-left: 16px;

            h3 {
                font-size: 12px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 14px;
                margin: 20px 0 18px;
                text-align: center;
            }

            figure {
                margin: 0 auto;
                width: 320px;
                height: 320px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            h4 {
                margin: 32px auto 16px;
                width: 320px;
                height: 60px;
                font-size: 12px;
                font-weight: 400;
                color: #000000;
                line-height: 20px;
            }

            cite {
                margin: 0 auto;
                width: 320px;

                h3 {
                    margin: 0;
                    font-size: 0;
                    line-height: 20px;
                    text-align: left;
                    color: #000000;

                    strong {
                        font-size: 14px;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: 500;
                    }

                    span {
                        font-size: 14px;
                        font-family: Roboto;
                        font-weight: 400;
                    }
                }
            }
        }
    }

    .print-detail-warp {
        margin-bottom: 40px;
    }

    .color-shift-warp {
        .color-shift-exhibit {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            &>h3 {
                width: 100%;
            }

            &>p {
                width: 100%;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;
                line-height: 20px;
                margin-bottom: 12px;
            }
        }

        .exhibit {
            margin-bottom: 10px;
            margin-right: 14px;

            h4 {
                width: 100%;
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 16px;
                margin-bottom: 10px;
            }

            figure {
                position: relative;
                padding-bottom: 100%;
                width: 320px;
                border-radius: 4px;
                border: 1px solid #dcdcdc;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    background: #ffffff;
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }

        .color-shift-explain {
            width: 100%;

            h3 {
                margin: 32px 0 22px;
                font-size: 18px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #000000;
                line-height: 28px;

                &>svg,
                &>img {
                    float: left;
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                }
            }

            h4 {
                font-size: 14px;
                font-weight: 400;
                color: #000000;
                line-height: 20px;
                margin-bottom: 8px;
            }

            p {
                font-size: 14px;
                font-weight: 400;
                color: #555555;
                line-height: 20px;
            }

            figure {
                margin: 14px -32px;

                img {
                    width: 236px;
                    height: 212px;
                    margin: 10px 32px;
                }
            }
        }
    }

    table {

        th,
        td {
            border: 1px solid #e6e6e6;
            height: 40px;
        }
    }
}

@media (max-width: 960px) {
    .exhibit {
        width: 100%;

        figure {
            width: 100% !important;
            max-width: 320px;
        }

        &:last-child {
            margin-bottom: 0 !important;
        }
    }

    .print-detail {
        flex-wrap: wrap;

        .print-detail-info {
            margin-top: 20px;
        }
    }

    .product-detail-print-guide .color-shift-warp .color-shift-explain {
        figure {
            width: 100%;
            margin: 16px 0 12px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            img {
                width: 100% !important;
                max-width: 236px;
                height: auto;
                margin: 0 0 12px;
            }
        }
    }

    .print-detail table td>button {
        &.active {
            color: #555 !important;
            text-decoration: underline !important;

            &::after {
                display: none;
            }
        }
    }

    .product-detail-print-guide .print-detail .print-detail-info {
        display: none;

        &[show] {
            display: block;
        }
    }
}
</style>
